<template>
  <div class="operate-manage-view">
    <div class="operate-manage-content"
         v-loading="isLoading"
         element-loading-text="数据加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(21, 29, 54, 0.8)"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="表格" name="first">
          <div class="operate-date-picker">
            <!--<el-date-picker-->
            <!--v-model="dateRange"-->
            <!--type="daterange"-->
            <!--range-separator="至"-->
            <!--start-placeholder="开始日期"-->
            <!--end-placeholder="结束日期"-->
            <!--@change="dateSelect"-->
            <!--:picker-options="pickerOptions"-->
            <!--&gt;-->
            <!--</el-date-picker>-->
            <el-date-picker
              class="date-picker"
              v-model="startValue"
              type="date"
              placeholder="开始日期"
              :picker-options="pickerOptions"
              @change="startdateSelect"
            >
            </el-date-picker>
            <div class="zhi">至</div>
            <el-date-picker
              class="date-picker"
              v-model="endValue"
              type="date"
              placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="enddateSelect"
            >
            </el-date-picker>
            <el-button type="primary" class="seach" @click="seachOperate">查询</el-button>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              height="100%"
              border
              style="width: 100%"
              highlight-current-row
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="time"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="fre"
                label="登录人数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="num"
                label="登录次数"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="柱状图" name="second">
          <div class="operate-date-picker">
            <el-date-picker
              class="date-picker"
              v-model="startValue"
              type="date"
              placeholder="开始日期"
              :picker-options="pickerOptions"
              @change="startdateSelect"
            >
            </el-date-picker>
            <div class="zhi">至</div>
            <el-date-picker
              class="date-picker"
              v-model="endValue"
              type="date"
              placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="enddateSelect"
            >
            </el-date-picker>
            <el-button type="primary" class="seach" @click="seachOperate">查询</el-button>
          </div>
          <div class="histogram">
            <hisChart :datas="hisDatas" height="6rem"></hisChart>
          </div>
        </el-tab-pane>
        <el-tab-pane label="折线图" name="third">
          <div class="operate-date-picker">
            <el-date-picker
              class="date-picker"
              v-model="startValue"
              type="date"
              placeholder="开始日期"
              :picker-options="pickerOptions"
              @change="startdateSelect"
            >
            </el-date-picker>
            <div class="zhi">至</div>
            <el-date-picker
              class="date-picker"
              v-model="endValue"
              type="date"
              placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="enddateSelect"
            >
            </el-date-picker>
            <el-button type="primary" class="seach" @click="seachOperate">查询</el-button>
          </div>
          <div class="line">
            <lineChart :datas="datas" height="6rem"></lineChart>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import lineChart from '@/UIComponents/myEcharts/lineChart/lineChart.vue';
  import hisChart from '@/UIComponents/myEcharts/histogram/histogram.vue'

  export default {

    components: {
      lineChart,
      hisChart
      // name
    },
    name: "operateManageView",
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },
      // dateRange: {
      //   type: Array,
      //   default: []
      // },
      tableData: {
        type: Array,
        default: []
      },
      datas: {
        type: Object,
        default: []
      },
      hisDatas: {
        type: Object,
        default: []
      }
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        activeName: "first",
        dateRange: [],
        startValue: "",
        endValue: ""
      }

    },
    created() {
    },
    mounted() {

    },
    methods: {
      handleClick(tab, event) {
        this.$emit('handleClick', tab, event);
      },
      // dateSelect() {
      //   let start = new Date(this.dateRange[0]).Format("yyyy-MM-dd");
      //   let end = new Date(this.dateRange[1]).Format("yyyy-MM-dd");
      //   this.$emit('dateSelect', start, end);
      //
      //   // console.log(this.dateRange);
      //   // console.log(new Date(this.dateRange[0]).Format("yyyy-MM-dd"));
      //   // console.log(new Date(this.dateRange[1]).Format("yyyy-MM-dd"));
      //
      // },
      startdateSelect() {
        let start = new Date(this.startValue).Format("yyyy-MM-dd");
        this.$emit('startdateSelect', start);
      },
      enddateSelect() {
        let end = new Date(this.endValue).Format("yyyy-MM-dd")
        this.$emit('enddateSelect', end);
      },
      seachOperate() {
        this.$emit('seachOperate');
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./operateManage");
</style>
